{extend name="index/base" /}
{block name="content"}
<blockquote class="layui-elem-quote fhui-admin-main_hd">
    <h2>客服列表</h2>
</blockquote>

<div class="y-role">
    <!--工具栏-->
    <div id="floatHead" class="toolbar-wrap">
        <div class="toolbar">
            <div class="box-wrap">
                <a class="menu-btn"></a>
                <div class="l-list">
                    <a class="layui-btn layui-btn-sm do-action" data-type="doAdd" href="javascript:void(0);" id="doAdd"><i class="fa fa-plus"></i>新增</a>
                    <a class="layui-btn layui-btn-sm do-action" onclick="window.location.reload()"><i class="fa fa-refresh fa-spin"></i>刷新</a>
                </div>
            </div>
        </div>
    </div>
    <!--/工具栏-->
    <!--文字列表-->
    <div class="fhui-admin-table-container">
        <table id="table1" lay-filter="table1"></table>
    </div>
</div>

<!--添加管理员-->
<div class="layui-hide" id="add_authuser">
    <div style="padding: 20px;">
        <form class="layui-form layui-form-pane" action="" lay-filter="add_form">
            
            <div class="layui-form-item">
                <label class="layui-form-label">昵称</label>
                <div class="layui-input-block">
                    <input type="text" name="nickname" required  lay-verify="required" placeholder="请输入昵称" autocomplete="off" class="layui-input" value="">
                </div>
            </div>
            
            <div class="layui-form-item">
                <label class="layui-form-label">微信号</label>
                <div class="layui-input-block">
                    <input type="text" name="wx_account" required  lay-verify="required" placeholder="请输入微信号" autocomplete="off" class="layui-input" value="">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">手机号</label>
                <div class="layui-input-block">
                    <input type="text" name="mobile" required  lay-verify="required" placeholder="请输入手机号" autocomplete="off" class="layui-input" value="">
                </div>
            </div>
        
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <a class="layui-btn" lay-submit lay-filter="add_submit">提交</a>
                </div>
            </div>
        </form>
    </div>
</div>
<!--添加管理员结束-->

<!--编辑管理员-->
<div class="layui-hide" id="edit_authuser">
    <div style="padding: 20px;">
        <form class="layui-form layui-form-pane" action="" lay-filter="edit_form">
            <input type="hidden" name="id" value="">
            <div class="layui-form-item">
                <label class="layui-form-label">昵称</label>
                <div class="layui-input-block">
                    <input type="text" name="nickname" required  lay-verify="required" placeholder="请输入昵称" autocomplete="off" class="layui-input" value="">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">微信号</label>
                <div class="layui-input-block">
                    <input type="text" name="wx_account" required  lay-verify="required" placeholder="请输入微信号" autocomplete="off" class="layui-input" value="">
                </div>
            </div>
            
            <div class="layui-form-item">
                <label class="layui-form-label">手机号</label>
                <div class="layui-input-block">
                    <input type="text" name="mobile" required  lay-verify="required" placeholder="请输入手机号" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <input type="hidden" name="id">
                    <a class="layui-btn" lay-submit lay-filter="edit_submit">提交</a>
                </div>
            </div>
        </form>
    </div>
</div>
<!--编辑管理员结束-->

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

{/block}
{block name="js"}
<script type="text/javascript">
    layui.use(['table','jquery','form','upload'], function(){
        var table = layui.table;var form = layui.form;var upload = layui.upload;
        var $ = layui.$;
        var token = layui.sessionData('token').token;
        $(".token").val(token);
        var inittable = table.render({
            elem: '#table1'
            ,height: '700'
            ,url: '{:url("/api/Sysconfig/getContacts")}?token='+token //数据接口
            ,page: true //开启分页
            ,limit: 20
            ,cols: [[ //表头
                {field: 'id', title: 'ID', width:70, fixed: 'left'}
                ,{field: 'nickname', title: '昵称'}
                ,{field: 'wx_account', title: '微信号'}
                ,{field: 'mobile', title: '手机号'}
                ,{fixed: 'right','title':'操作', align:'center', templet: '#barDemo'}
            ]]
        });

        // 编辑的弹窗和删除
        table.on('tool(table1)', function(obj){
            var data = obj.data; //获得当前行数据
            if (obj.event === 'edit') {
                $.get("{:url('/api/sysconfig/getContactsById')}",{id:data.id,'token':token},function (res) {
                    if(res.code!==0){
                        layer.msg(res.msg);
                    }
                    form.val("edit_form", res.data);
                });
                var editopen = layer.open({
                    type : 1,
                    title : '编辑用户',
                    area : ['500px', '400px'],
                    shade : 0.6,
                    scrollbar : true,
                    content : $("#edit_authuser"),
                    success :function () {
                        $("#edit_authuser").removeClass('layui-hide');
                    },
                    cancel:function(){
                        $("#edit_authuser").addClass('layui-hide');
                    }
                });
            } else if (obj.event === 'del'){
                layer.confirm('您确定要删除该客服吗？', function(index){
                    var loading = layer.load(1, {shade: [0.1, '#fff']});
                    $.post("{:url('api/Sysconfig/delContacts')}",{id:data.id,'token':token},function(res){
                        layer.close(loading);
                        if(res.code===0){
                            layer.msg(res.msg,{time:1000,icon:1});
                            obj.del();
                        }else{
                            layer.msg('操作失败！',{time:1000,icon:2});
                        }
                    });
                    layer.close(index);
                });
            }
        });

        //刷新
        $('#reload_btn').click(function(){
            var keywords = $('#keywords').val();
            inittable.reload({
                where:{
                    keywords:keywords
                },
                page:{
                    curr:1
                }
            })
        });

        //添加用户弹窗
        $("#doAdd").click(function () {
            var open1 = layer.open({
                type : 1,
                title : '添加客服',
                area : ['500px', '400px'],
                shade : 0.6,
                scrollbar : true,
                content : $("#add_authuser"),
                success :function () {
                    $("#add_authuser").removeClass('layui-hide');
                },
                cancel:function(){
                    $("#add_authuser").addClass('layui-hide');
                }
            });
        })

        //添加用户--》添加图片
        var uploadInst = upload.render({
            elem: '#avatarBtn'
            ,url: '{:url("api/Index/imgUpload")}'
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#Pic').attr('src', result); //图片链接（base64）
                });
            },
            done: function(res){
                if(res.code==0){
                    $('#avatar').val(res.data);
                }else{
                    //如果上传失败
                    return layer.msg('上传失败');
                }
            }
            ,error: function(){
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                });
            }
        });

        //添加用户处理请求
        var add_user = form.on('submit(add_submit)', function(data){
            console.log(data.field);
            var loading = layer.load(1, {shade: [0.1, '#fff']});
            $.post("{:url('/api/Sysconfig/saveContacts')}?token="+token, data.field, function (res) {
                layer.close(loading);
                if (res.code == 0) {
                    layer.msg(res.desc, {time: 1800, icon: 1}, function () {
                        layer.closeAll();
                        inittable.reload();
                    });
                } else {
                    layer.msg(res.desc, {time: 1800, icon: 2});
                }
            });
        });

        // 编辑用户切换图片
        var uploadInst_edit = upload.render({
            elem: '#avatareditBtn'
            ,url: '{:url("api/Index/imgUpload")}'
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#editPic').attr('src', result); //图片链接（base64）
                });
            },
            done: function(res){
                if(res.code==0){
                    $('#editavatar').val(res.data);
                }else{
                    //如果上传失败
                    return layer.msg('上传失败');
                }
            }
            ,error: function(){
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                });
            }
        });

        //编辑用户处理请求
        var edit_user = form.on('submit(edit_submit)', function(data){
            console.log(data.field);
            var loading = layer.load(1, {shade: [0.1, '#fff']});
            $.post("{:url('/api/Sysconfig/saveContacts')}?token="+token, data.field, function (res) {
                layer.close(loading);
                if (res.code == 0) {
                    layer.msg(res.msg, {time: 1800, icon: 1},function () {
                        layer.closeAll();
                        inittable.reload();
                    });
                } else {
                    layer.msg(res.msg, {time: 1800, icon: 2});
                }
            });
        });
    });
</script>
{/block}